<template>
  <div class="app-container">
    <!-- 用户卡片容器 -->
    <el-card class="user-card">
      <!-- 头盒子 -->
      <div class="head-box">
        <!-- 头像 -->
        <div class="avatar-box">
          <el-upload
            class="avatar-uploader"
            :action="upload_url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="token"
          >
            <el-avatar shape="square" :size="50" :src="avatar_url"></el-avatar>
          </el-upload>
        </div>
        <span>{{ this.name }}</span>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 认证状态 -->
      <div class="user-starus">
        <!-- 手机认证 -->
        <span :class="{ 'status-succes': accountStatus.phoneStatus }">
          <i class="el-icon-mobile-phone"></i>
          <el-divider direction="vertical"></el-divider>
        </span>
        <!-- 实名认证 -->
        <span :class="{ 'status-succes': accountStatus.realNameAuth }">
          <i class="el-icon-user"></i>
          <el-divider direction="vertical"></el-divider>
        </span>
        <!-- 支付密码 -->
        <span :class="{ 'status-succes': accountStatus.payPwdStatus }">
          <i class="el-icon-lock"></i>
          <el-divider direction="vertical"></el-divider>
        </span>
        <!-- 邮箱认证 -->
        <span :class="{ 'status-succes': 0 }">
          <i class="el-icon-message"></i>
        </span>
      </div>
    </el-card>
    <!-- 投资计划卡片容器 -->
    <el-card class="plan-card">
      <!-- 资产容器 -->
      <div class="assts-box">
        <div class="assets-item">
          <el-image :src="require('@/assets/dashboard/1.png')"></el-image>
          <div>可用余额</div>
          <div class="money">{{ accountInfo.balance }}元</div>
          <div class="btn-box"></div>
          <router-link :to="{ path: '/assetManage/recharge' }">
            <el-button type="primary" size="small">充值</el-button>
          </router-link>
          <router-link :to="{ path: '/assetManage/extract' }">
            <el-button type="warning" size="small">提现</el-button>
          </router-link>
        </div>
        <div class="assets-item">
          <el-image :src="require('@/assets/dashboard/2.png')"></el-image>
          <div>资产总额</div>
          <div class="money">{{ accountInfo.total }}元</div>
        </div>
        <div class="assets-item">
          <el-image :src="require('@/assets/dashboard/3.png')"></el-image>
          <div>累计收益</div>
          <div class="money">{{ accountInfo.profit }}元</div>
        </div>
      </div>
      <!-- 计划容器 -->
      <div class="plan-box">
        <el-card class="box-card-plan">
          <div slot="header" class="clearfix">
            <span>投资计划</span>
          </div>
          <div v-for="(item, index) in productList" :key="index">
            <div class="plan-item">
              <div class="plan-content">
                <div class="plan-title">
                  <h4>{{ item.productName }}</h4>
                </div>
                <div class="plan-data">
                  <div class="plan-desc">
                    起投金额:<br />
                    交易期限:
                  </div>
                  <div class="plan-info">
                    {{ item.proLowerInvest }}元 <br />{{ item.minLimit }} -
                    {{ item.maxLimit }}月
                  </div>
                </div>
              </div>
              <div class="plan-btn">
                <!-- router-link跳转功能  -->
                <router-link :to="{ path: '/Invest' }">
                  <el-button type="success">投资</el-button></router-link
                >
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { getToken } from "@/utils/auth";

export default {
  name: "Dashboard",
  data() {
    return {
      token: {
        // 上传头像的时候要携带token，也要在el-upload携带token，headers设置上传的请求头部
        token: getToken(),
      },
      upload_url: process.env.VUE_APP_BASE_API + "/user/avatar",
    };
  },
  methods: {
    ...mapActions({
      getProList: "invest/getProductList"
    }),
    handleAvatarSuccess(res, file) {
      console.log("上传图片成功", res);
      // this.imageUrl = URL.createObjectURL(file.raw);
      if (res.data.avatar) {
        // 变成实时更新
        this.$store.commit("user/SET_AVATAR", res.data.avatar);
        this.getProList()
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 获取产品列表
    getProductList(){ // 如果有的话，就什么都不做，如果没有的话就用api接口
      
      if(!this.productList.length){
        this.getProList()
      }
    },
  },
  computed: {
    ...mapGetters(["name", "avatar", "accountStatus", "accountInfo", "productList"]),
    avatar_url() {
      // console.log(this.avatar) // 打印头像名字
      return "http://127.0.0.1:5000/static/avatar/" + this.avatar;
    },
  },
  created() {
      console.log('123')
      this.getProductList()
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  .user-card {
    .status-succes {
      color: green;
    }
    i {
      font-size: 20px;
    }
    .el-divider--horizontal {
      margin: 12px 0px;
    }
    display: flex;
    .head-box {
      display: flex;
      align-items: center;
      span {
        margin: 10px;
      }
      .avatar-box {
        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
      }
    }
  }
  .plan-card {
    margin-top: 10px;
    .assts-box {
      display: flex;
      justify-content: space-around;
      .assets-item {
        text-align: center;
        .el-image {
          max-width: 150px;
          max-height: 150px;
          margin-bottom: 10px;
        }
        .money {
          font-size: 20px;
          color: #3ca0f3;
          margin: 5px 0px;
        }
        .el-button {
          margin: 0px 5px;
        }
      }
    }
    .plan-box{
      .box-card-plan{
        margin-top: 15px;
        .plan-item{
          background-color:rgb(240,240,240);
          border-radius: 5px; // 圆角
          margin-bottom: 25px;
          display: flex;
          justify-content: space-between;
          .plan-content{
            display: flex;
            .plan-title{
              padding: 0px 25px;
              box-sizing: border-box;
              background-color: #0fb475;
              border-radius: 5px;
              color: white;
            }
            .plan-data{
              display: flex;
              align-items: center;
              margin-left: 15px;
              line-height: 150%;
              color: #616161;
              .plan-desc{
                text-align: right;
                margin-right: 8px;
              }
            }
          }
        }
        .plan-btn{
          display: flex;
          align-items: center;
          padding: 15px;
        }
      }
    }
  }
}
</style>
